<div style="width:525px; height:550px; margin-left:30px; background-color:#fff;">
  <div id="pages" style="width:485px; padding:15px 20px 20px;">
    <form id="form-info" method="post" action="<?php e($this->base); ?>/<?php e($this->params['controller']); ?>/update" onsubmit="return save();">
        <div class="fLeft" style="margin:10px;">
          <h3 style="margin-bottom:3px;"><?php __('Your Personal Details'); ?></h3>
          <label><?php __('Full Name'); ?>:</label>
          <div style="margin:1px 0 3px;"><input type="text" id="name" name="name" value="<?php e($member['name']); ?>" class="input req" /></div>
          <label><?php __('E-mail'); ?>:</label>
          <div style="margin:1px 0 3px;"><input type="text" id="username01" name="username" value="<?php e($member['username']); ?>" class="input req" /></div>
          <label><?php __('Telephone'); ?>:</label>
          <div style="margin:1px 0 18px;"><input type="text" id="telephone" name="telephone" value="<?php e($member['telephone']); ?>" class="input req" /></div>
          <label><?php __('Fax'); ?>:</label>
          <div style="margin:1px 0 18px;"><input type="text" id="fax" name="fax" value="<?php e($member['fax']); ?>" class="input" /></div>
        </div>
        <div class="fRight" style="margin:10px 10px 0 0;">
          <h3 style="margin-bottom:3px;"><?php __('Your Address'); ?></h3>
          <label><?php __('Address'); ?>:</label>
          <div style="margin:1px 0 3px;"><textarea rows="3" cols="20" id="address" name="address" class="req"><?php e($member['address']); ?></textarea></div>
          <label><?php __('Post Code'); ?>:</label>
          <div style="margin:1px 0 18px;"><input type="text" id="postcode" name="postcode" value="<?php e($member['postcode']); ?>" class="input req" /></div>
          <label><?php __('City'); ?>:</label>
          <div style="margin:1px 0 18px;"><input type="text" id="city" name="city" value="<?php e($member['city']); ?>" class="input req" /></div>
          <label><?php __('Country'); ?>:</label>
          <div style="margin:1px 0 18px;"><input type="text" id="country" name="country" value="<?php e($member['country']); ?>" class="input req" /></div>
          <label><?php __('Region / State'); ?>:</label>
          <div style="margin:1px 0 18px;"><input type="text" id="state" name="state" value="<?php e($member['state']); ?>" class="input req" /></div>
        </div>
        <div class="clear"></div>
        <div>
          <center><input type="submit" value="<?php __('Save'); ?>" style="margin-top:20px; display:block;" /></center>
        </div>
    </form>
  </div>
</div>

<script type="text/javascript">
function save () {
    var message = Ext.get('message');
    var focuson = '';

    if (validation('form-info') == false) {
        message.update('Please enter required information.');
        message.addClass('error').highlight();
        return false;
    }

    transId = Ext.Ajax.request({
        form: 'form-info',
        success: function(response, opts) {
            var obj = Ext.decode(response.responseText);
            if (obj.status == false) {
                if (obj.mesg) {
                    message.update(obj.mesg);
                    message.addClass('error').slideIn().highlight();
                }
                if (Ext.isArray(obj.error)) {
                    errorFields(obj.error);
                }
            } else {
                if (obj.mesg) {
                    message.hide().update(obj.mesg);
                    message.addClass('success').slideIn().highlight().pause(5).slideOut('t', { useDisplay:true });
                }
            }
        },
        failure: function(response, opts) {
            message('server-side failure with status code '+response.status);
        },
        callback: function() {
            Ext.fly('status').slideOut('t', {
                easing: 'easeOut',
                useDisplay: true
            });
            Ext.each(Ext.query('input[type=submit],input[type=reset]', 'form-info'), function(e){ e.disabled = false; });
        }
    });

    if (Ext.Ajax.isLoading(transId)) {
        Ext.each(Ext.query('input[type=submit],input[type=reset]', 'form-info'), function(e){ e.disabled = true; });
        Ext.fly('status').update('Saving..');
        Ext.fly('status').slideIn('t', {
            easing: 'easeOut'
        });
    }

    return false;
} // save

function clearForm () {
    Ext.each(Ext.query('input[type=text], input[type=password], input[type=hidden], textarea', 'form-info'), function(e){
        e.value = '';
    });
} // clearForm

function cleanError (form) {
    Ext.fly('message').setStyle({ display:'none' }).removeClass('error');
    Ext.select('.invalid', false, form).removeClass('invalid');
    Ext.select('div.invalidField', false, form).remove();
    Ext.select('.invalidText', false, form).removeClass('invalidText');
} // cleanError

function validation (form) {
    var proceed = true;
    var focuson = '';

    cleanError(form);
    Ext.each(Ext.select('.req', false, form).elements, function(e){
        var el = Ext.get(e);

        if (!el.getValue() || el.getValue() == 'select..') {
            proceed = false;
            el.addClass('invalid');
            el.up('div').prev('label').addClass('invalidText');

            if (!focuson) {
                focuson = e.id;
                el.focus();
                el.fadeIn({
                    duration: 2.0
                });
            }
        }
    });

    return proceed;
} // validation

function errorFields (error) {
    var focuson = '';

    Ext.each(error, function(e) {
        var el  = Ext.get(e.id);
        var err = '<div class="invalidField" style="display:none;">'+e.code+'</div>';
            el.addClass('invalid');
            el.up('div').prev('label').addClass('invalidText');
            el.insertHtml('afterEnd', err);
            el.next('div.invalidField').slideIn('t', {
                duration:.4
            });
            if (e.clear) {
                el.dom.value = '';
            }
            if (!focuson) {
                focuson = e.id;
                el.focus();
                el.fadeIn({
                    duration: 2.0
                });
            }
    });
} // errorFields
</script>